//获得slider插件对象
var gallery = mui('.mui-slider')
gallery.slider({
  interval: 5000, //自动轮播周期，若为0则不自动播放，默认为0；
})

//主页
let mainPage = document.querySelector('#mainPage')
let homeCityPage = document.querySelector('#homeCityPage')
let header = document.querySelector('#header')
let headerCity = header.querySelector('button')
function cityChange(cityName) {
  console.log(cityName)
  mainPage.classList.remove('none')
  homeCityPage.classList.add('none')
  headerCity.innerHTML = cityName + ` <span class="arrowdown"></span>`
}
//城市
headerCity.onclick = (event) => {
  mainPage.classList.add('none')
  homeCityPage.classList.remove('none')
  // event.stopPropagation();
  return false
}
//搜索框
let mainsearch = mainPage.querySelector('#header .search')
mainsearch.onclick = (event) => {
  fishMMainCt.classList.remove('none')
  mainPage.classList.add('none')
  event.stopPropagation()
}

//app切换
let homeToAppLayerIco = mainPage.querySelector('.homeToApp-layerIco')
let homeToAppLayer2 = mainPage.querySelector('.homeToApp-layer2')
let homeToAppLayer2Close = homeToAppLayer2.querySelector('.homeToApp-layer2 .close')
homeToAppLayerIco.onclick = () => {
  homeToAppLayerIco.classList.add('none')
  homeToAppLayer2.classList.remove('none')
}
homeToAppLayer2Close.onclick = () => {
  homeToAppLayerIco.classList.remove('none')
  homeToAppLayer2.classList.add('none')
}

//限时抢购倒计时
let showTime = document.querySelectorAll('#flashSale .mui-card-header .sale-time span')
function PlusZero(num) {
  return (num = num >= 10 ? num : '0' + num)
}
let nowTime = new Date()
let nowMillSecond = nowTime.getTime()
let future = nowMillSecond + 1000 * 60 * 60 * 8
function getTime() {
  let nowTimes = new Date()
  let nowMillSeconds = nowTimes.getTime()

  let diffTime = parseInt((future - nowMillSeconds) / 1000)
  let showSecond = diffTime % 60
  let showMinutes = parseInt((diffTime / 60) % 60)
  let showHour = parseInt(diffTime / 60 / 60)

  showTime[0].innerHTML = PlusZero(showHour)
  showTime[1].innerHTML = PlusZero(showMinutes)
  showTime[2].innerHTML = PlusZero(showSecond)
  // console.log(diffTime,showSecond,showMinutes,showHour);
}
getTime()
setInterval(() => {
  getTime()
}, 1000)

//城市切换
//搜索框
//输入中文/拼音
//对不起，找不到：<span class="autofill-hili">1</span>
let searchReset = document.querySelector('.search-reset')
let searchResetClear = document.querySelector('.clear')
let searchResetCancel = document.querySelector('.cancel')
let searchResetInput = searchReset.querySelector('.search-reset input')
let searchComplete = document.querySelector('.search-complete')
let cityNotice = document.querySelector('.city-notice')
let citynav = document.querySelector('.city-nav')
searchResetInput.onfocus = () => {
  searchComplete.classList.remove('none')
  searchComplete.children[0].classList.remove('none')
  cityNotice.classList.add('none')
  citynav.classList.add('none')
}
searchResetClear.onclick = () => {
  searchResetInput.value = ''
}
searchResetCancel.onclick = () => {
  searchComplete.classList.add('none')
  searchComplete.children[0].classList.add('none')
  cityNotice.classList.remove('none')
  citynav.classList.remove('none')
}
let hotVCityUl = homeCityPage.querySelector('.hot-city-ul')
let sortCity = homeCityPage.querySelectorAll('.sort-city')
hotVCityUl.onclick = () => {
  let cityName = event.target.dataset.name
  cityChange(cityName)
}
for (let i = 0; i < sortCity.length; i++) {
  sortCity[i].onclick = () => {
    let cityName = event.target.dataset.name
    cityChange(cityName)
    console.log(event.target)
  }
}

//城市选择监听
// let cityKey = homeCityPage.querySelectorAll("h3");
// for(let i = 0; i < cityKey.length; i++){
//   console.log(cityKey[i].offsetTop);
// }
//城市导航
let cityNav = homeCityPage.querySelectorAll('.city-nav li')
for (let i = 0; i < cityNav.length; i++) {
  cityNav[i].onclick = () => {
    cityNav[i].children[0].classList.add('show')
    setTimeout(() => {
      cityNav[i].children[0].classList.remove('show')
    }, 500)
  }
}

//搜索
let fishMMainCt = document.querySelector('#fish-m-mainCt')
let searchKey = document.querySelector('#fish-m-mainCt .input-info .serch-key')
let toBack = document.querySelector('#fish-m-mainCt .to-back')
let searchcancel = document.querySelector('#fish-m-mainCt .input-info .cancel')
let mCt01 = document.querySelector('#fish-m-mainCt .msearch-content .m-ct-01')
let mCt02 = document.querySelector('#fish-m-mainCt .msearch-content .m-ct-02')
let mCt03 = document.querySelector('#fish-m-mainCt .msearch-content .m-ct-03')
let mCt04 = document.querySelector('#fish-m-mainCt .msearch-content .m-ct-04')
let mCt04i = document.querySelectorAll('#fish-m-mainCt .msearch-content .m-ct-04 .one-line i')
let mct04txt = mCt04.querySelector('ul')
let str3
searchKey.onfocus = () => {
  searchKey.value = ''
  searchcancel.classList.remove('none')
  // if(searchKey.value == "") {
  //   console.log(111);
  // }
}
searchKey.oninput = () => {
  if (searchKey.value != '') {
    mCt01.classList.add('none')
    mCt04.classList.remove('none')
    // for(let i = 0; i < mCt04i.length; i++){
    //   mCt04i[i].innerHTML = searchKey.value;
    // }
    axios
      .get('http://localhost:3001/fuzzy_search_list', {
        params: {
          txt: searchKey.value,
        },
      })
      .then((res) => {
        console.log(res)
        str3 = ''
        str3 += `
        <li>
            <a class="jiudian clearfix" href="javascript:void(0)" data-ct="${searchKey.value}相关的酒店">
                <div class="show-message clearfix">
                    <div class="common-pro">
                        <p class="one-line"><i>${searchKey.value}</i>相关的酒店</p>
                    </div>
                </div>
            </a>
        </li>
      `
        res.data.data.forEach((item) => {
          str3 += `
          <li>
              <a class="jiudian clearfix" href="javascript:void(0);" ct="${item.title}">
                  <div class="show-message clearfix">
                      <div class="common-pro">
                          <p class="one-line">${item.title}<b>${item.icontopbadge} ${item.type} </b></p>
                      </div>
                  </div>
              </a>
          </li>
        `
        })
        mct04txt.innerHTML = str3
      })
      .catch((err) => {
        console.log(err)
      })
  }
}
searchcancel.onclick = () => {
  searchKey.value = '目的地/酒店/景点/关键字'
  searchcancel.classList.add('none')
  mCt01.classList.remove('none')
  mCt04.classList.add('none')
}
toBack.onclick = () => {
  fishMMainCt.classList.add('none')
  mainPage.classList.remove('none')
}
